<template>
	<div>
		<!-- Card: 展示帖子列表  -->
		<el-card shadow="never">
			<div slot="header" class="clearfix">
				<!-- Tab: 最新主题 & 热门主题 -->
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<!-- Tab: 最新主题 -->
					<el-tab-pane label="最新主题" name="latest">	
						<article class="media" v-for="(post, index) in postList" :key="index">
							<!-- Media Left: Avatar -->
							<div class="media-left">
								<figure class="image is-48x48">
									<img :src="`https://cn.gravatar.com/avatar/${post.userId}?s=164&d=monsterid`" style="border-radius: 5px" />
								</figure>
							</div>
							<!-- Media Middle: Content -->
							<div class="media-content">
								<!-- 帖子标题 -->
								<p class="ellipsis is-ellipsis-1">
									<el-tooltip class="item" effect="dark" :content="post.title" placement="top">
										<!-- 点击帖子标题跳转到对应的帖子详情页: /post-detail/postId -->
										<router-link :to="{ name: 'post-detail', params: { postId: post.postId } }">
											<span class="is-size-6">{{ post.title }}</span>
										</router-link>
									</el-tooltip>
								</p>
								<!-- 发帖人 | 发帖时间 | 标签 | 浏览量 -->
								<nav class="level has-text-grey is-mobile is-size-7 mt-2">
									<!-- Level: Left side -->
									<div class="level-left">
										<!-- 发帖人 clickable -->
										<span class="mr-5">
											<router-link class="level-item" :to="{ path: `/member/${post.username}/home` }">
												{{ post.nickname }} 
											</router-link>
										</span>
										<!-- 发帖时间 -->
										<span class="mr-5">
											发布于: {{ dayjs(post.createdTime).format("YYYY/MM/DD") }}
										</span>
										<!-- 帖子标签: 循环生成当前帖子的所有标签 clickable -->
										<span 
											class="tag is-hidden-mobile is-success is-light mr-5"
											v-for="(tag, index) in post.tags"
											:key="index"	
										>
											<router-link :to="{ name: 'tag', params: { tagName: tag.tagName } }">
												{{ "#" + tag.tagName }}
											</router-link>
										</span>
										<!-- 帖子浏览量 -->
										<span class="is-hidden-mobile">浏览量: {{ post.viewNum }}</span>
									</div>
								</nav>
							</div>
							<!-- Media Right: No content here -->
							<div class="media-right" />
						</article>
					</el-tab-pane>
					
					<!-- Tab: 热门主题 -->
					<el-tab-pane label="热门主题" name="hot" :lazy="true">
						<article class="media" v-for="(item, index) in postList" :key="index">
							<!-- Media Left: Avatar -->
							<div class="media-left">
								<figure class="image is-48x48">
									<img :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`" style="border-radius: 5px"/>
								</figure>
							</div>
							<!-- Media Middle: Content -->
							<div class="media-content">
								<!-- 帖子标题 -->
								<p class="ellipsis is-ellipsis-1">
									<el-tooltip class="item" effect="dark" :content="item.title" placement="top">
										<!-- 点击帖子标题跳转到对应的帖子详情页: /post-detail/postId -->
										<router-link :to="{ name: 'post-detail', params: { postId: item.id } }">
											<span class="is-size-6">{{ item.title }}</span>
										</router-link>
									</el-tooltip>
								</p>
								<!-- 发帖人 | 发帖时间 | 标签 | 浏览量 -->
								<nav class="level has-text-grey is-mobile is-size-7 mt-2">
									<!-- Level: Left side -->	
									<div class="level-left">
										<!-- 发帖人 clickable -->
										<span class="mr-5">
											<router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
												{{ item.alias }}
											</router-link>
										</span>
										<!-- 发帖时间 -->
										<span class="mr-5">
											发布于: {{ dayjs(item.createTime).format("YYYY/MM/DD") }}
										</span>
										<!-- 帖子标签: 循环生成当前帖子的所有标签 clickable -->
										<span
											class="tag is-hidden-mobile is-success is-light mr-5"
											v-for="(tag, index) in item.tags"
											:key="index"	
										>
											<router-link :to="{ name: 'tag', params: { tagName: tag.tagName } }">
												{{ "#" + tag.tagName }}
											</router-link>
										</span>
										<!-- 帖子浏览量 -->
										<span class="is-hidden-mobile">浏览量: {{ item.view }}</span>								
									</div>
								</nav>
							</div>
							<!-- Media Right: No content here -->
							<div class="media-right" />
						</article>
					</el-tab-pane>
				</el-tabs>
			</div>
		
			<!-- 引入分页组件 -->
			<pagination
				v-show="page.total > 0"
				:total="page.total"
				:page.sync="page.current"
				:limit.sync="page.size"
				@pagination="init"
			/>
		</el-card>
	</div>
</template>

<script>
import { getPostList } from "@/api/post";
import Pagination from "@/components/Pagination";

export default {
	// 给当前组件取名为 TopicList
	name: 'TopicList',

  	components: { 
		Pagination 
	},

	data() {
		return {
			// 用来切换视图: 最新或者最热帖子 
			activeName: 'latest',

			// 帖子列表 
			postList: [],

			// 添加分页信息
			page: {
				current: 1, // 当前页数，默认是 1
				size: 10, // 每页的数量，默认是 10
				total: 0, // 总共返回了多少条，用于给分页器决定具体分多少页
				tab: 'latest' // 显示哪个页面，默认是 latest 最新
			}
		}
	},

	created() {
		console.log('tab in lifecycle method created: ', this.page.tab);
		this.init(this.page.tab);
	},

	methods: {
		// 只要当前页改变或者每页条数改变，便会触发 init 方法
		init(tabName) {
			console.log('tabName before invoking getPostList:', tabName);
			getPostList(this.page.current, this.page.size, tabName).then(response => {
				const { data } = response // SysResult

				// 给分页组件的 current, size 和 total 属性赋值
				this.page.current = data.current
				this.page.size = data.size
				// total 一定要从后端拿到，只有知道总共返回多少条，分页组件才知道显示成多少页
				this.page.total = data.total

				// 给帖子列表赋值
				this.postList = data.records // List<PostVO>
			})
		},

		// 切换最新与最热帖子视图
		handleClick(tab) {
			this.page.current = 1;
			this.init(tab.name);
		}
	}
}
</script>

<style scoped>
</style>
